<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			width:250px;
			background:#ccc;
		}
		.first{
			/* border-top-color:red;
			border-top-width:1px;
			border-top-style:solid;
			border-right-color:blue;
			border-right-width:2px;
			border-right-style:dashed;
			border-bottom-color:#ccc;
			border-bottom-width:4px;
			border-bottom-style:outset;
			border-left-color:pink;
			border-left-width:6px;
			border-left-style:double; */
			
			/* border-top:1px solid red;
			border-bottom:2px dashed blue; */

			/* border-color:red blue;
			border-width:2px;
			border-style:solid dashed dotted; */

			border:5px solid red;
			padding:20px;
			margin:10px;
		}

		.second{
			/* padding-top:5px;
			padding-left:3px;
			padding-bottom:10px;
			padding-right:8px; */
			padding: 5px;
		}

		.third{
			/* margin-top:50px;
			margin-left:30px; */
			/* margin: 10px 20px; */
			
			/*
				元素的居中
			 */
			/* 1.块级元素水平居中 */
			margin:5px auto;
			/* 2.文本水平居中 */
			text-align:center;
			/* 3.垂直居中：将height和line-height设置为相同 */
			height:100px;
			line-height:100px;
		}
	</style>
</head>
<body>
	<p class="first">welcome to html</p>
	<p class="second">welcome to css</p>
	<p class="third">welcome to javascript</p>
</body>
</html>